<template>
  <div class="handle">
    <div class="title">
      <van-icon name="arrow-left" color="#ffffff" @click="skip_shop"/>
      <van-search placeholder="请输入搜索关键词" />
      <van-icon name="shopping-cart-o" color="#ffffff" @click="skip_shoppingCart"/>
    </div>
    <!-- 热销单品 -->
    <van-row class="BurningHot">
      <van-col span="12">家用电器</van-col>
      <van-col span="12">更多</van-col>
    </van-row>

    <van-grid class="van-grid1" :border="false" :column-num="4">
      <van-grid-item v-for="(item, index) in list1" :key="index">
        <van-image :src="item.showImg" round />
        <van-row>
          <van-col span="24">{{ item.name }}</van-col>
        </van-row>
      </van-grid-item>
    </van-grid>

    <!-- 家庭常用 -->
    <van-row class="BurningHot">
      <van-col span="12">家用家具</van-col>
      <van-col span="12">更多</van-col>
    </van-row>

    <van-grid class="van-grid1" :border="false" :column-num="4">
      <van-grid-item v-for="(item, index) in list2" :key="index">
        <van-image :src="item.showImg" round />
        <van-row>
          <van-col span="24">{{ item.name }}</van-col>
        </van-row>
      </van-grid-item>
    </van-grid>

    <!-- 热门推荐 -->
    <van-row class="BurningHot hot">
      <van-col span="24">热门推荐</van-col>
    </van-row>
    <van-grid class="Hot" :border="false" :column-num="2">
      <van-grid-item v-for="(item, index) in list3" :key="index" @click="goodsDetails(item)">
        <van-image :src="item.showImg" />
        <van-row>
          <van-col span="24">{{ item.name }}</van-col>
          <van-col span="24">￥{{ item.price }}</van-col>
        </van-row>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {getSecondMall} from "../../../api/index"
export default {
  data() {
    return {
      list1: [],
      list2: [],
      list3: [],
    };
  },
  created(){
    this.init()
  },
  methods:{
    async init(){
      let {data , meta:{msg, status}} = await getSecondMall();
      // console.log(data);
      // console.log(data);
      this.list1 = data.result.slice(0,4);
      this.list2 = data.result.slice(4)
      this.list3 = data.goodsData;
    },
    goodsDetails(data){
      // 利用vuex存储当前点击项商品信息
      this.$store.commit('setCurrentGoods', data)
      // 跳转到商品详情页
      this.$router.push('/goodsDetails')
    },
    skip_shop(){
      this.$router.push('/shop')
    },
    skip_shoppingCart(){
      this.$router.push('/shopping_cart')
    }
  }
};
</script>

<style lang="less" scoped>
.handle {
  width: 100%;
  font-size: 26px;
  padding-bottom: 20px;
  background-color: #efefef;
  .title {
    width: auto;
    background: #ff5555;

    padding: 0;
    padding-top: 16px;
    display: flex;
    .van-search {
      width: 600px;
      height: 56px;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 0;
      .van-cell {
        padding: 0;
      }
    }
    .van-icon {
      padding: 10px 20px 0 16px;
      font-size: 42px;
    }
  }

  .button {
    margin: 0 82px;
    display: flex;
    justify-content: space-between;
    .van-button {
      font-size: 30px;
      width: 250px;
      height: 54px;
      padding: 22px 56px;
    }
  }

  .BurningHot {
    margin: 20px 20px;
    .van-col {
      font-size: 30px;
    }
    .van-col:nth-child(2) {
      text-align: right;
    }
  }
  //   BurningHot
  .van-grid1 {
    background-color: #ffffff;
    margin: 0 20px;
    padding-top: 36px;
    border-radius: 12px;
    box-shadow: rgba(153, 153, 153, 0.5) 0px 0px 14px 0px;
    /deep/.van-grid-item__content {
      padding: 0;
      .van-row {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 40px;
        .van-col {
          font-size: 26px;
        }
      };
      .van-image {
        width: 100px;
        height: 100px;
      }

    }
  }
  .often {
    margin: 60px 0;
  }
  .hot {
    margin: 30px 20px;
  }
  .Hot {
    margin-left: 20px;
    /deep/.van-grid-item__content {
      padding: 0;
      margin-right: 20px;
      .van-row {
        width: 100%;
        padding-left: 20px;
        margin: 20px 0 40px;
        .van-col {
          text-align: left;
          font-size: 26px;
        }
        .van-col:nth-child(2) {
          margin-top: 10px;
          color: #ff5555;
        }
      }
    }

    .van-grid-item {
      margin-top: 20px;
    }
    .van-grid-item:nth-child(1),
    .van-grid-item:nth-child(2){
      margin-top: 0;
    }
  }
}
</style>